<template>
	<view class="everydayrenwu">
		<headertop title="每日任务" str1="oridei" :back1="back1"></headertop>
		<view class="everydayrenwuback">

		</view>
		<view :style="{'margin-top':statusBarHeight+'px','height':barHeight+'px'}"></view>
		<view class="contentList">
			<view class="msgicon" v-if="!list.length">
				<image :src="_static('https://jingwei.xunfuzhifuzaixian.com/static/images/wxnone.png')" mode="widthFix">
				</image>
				<view class="msgtext">
					暂无内容
				</view>
			</view>
			<view class="itemboxx" v-for="item in list" :key="item.id" @click="gopage(item['kid'],item)">
				<view class="topline">
					<view class="leftbox">
						<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/微信图片_20250804134233.png"
							mode=""></image>
						<view class="yxtext">{{item['title']}}</view>
						<view class="reduc">

						</view>
					</view>
					<view class="rightxk">
						{{statustext(item['status'],arree)}}
					</view>
				</view>
				<view class="centernr">
					<view class="ll">
						<view class="fc">
							{{item['product']}}
						</view>
						<view class="tt">
							{{item['company']}}
						</view>
					</view>
					<view class="ll1">
						<view class="tt">
							联系人：<span style="color: #4E5969;">{{item['username']}}</span>
						</view>
						<view class="tt">
							联系电话：<span style="color: #4E5969;">{{item['telphone']}}</span>
						</view>
					</view>
					<view class="ll2">
						下次跟进时间:<span style="color: #4E5969;">{{item['nexttime']}}</span>
					</view>
					<view class="ll2" style="margin-bottom: 32rpx;">
						创建时间:<span style="color: #4E5969;">{{formatDate(item['createtime']*1000)}}</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import headertop from '@/components/header.vue'
	import {
		ref,
		onMounted,
		reactive,

	} from 'vue'
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import {
		_static
	} from '@/ulm/utils/url.js'
	import ulm, {
		$api
	} from '@/ulm';
	const barHeight = ref('')
	const total = ref(0)
	const list = ref([])
	const query = reactive({
		page: 1,
		limit: 10
	})
	var arree = [{
		label: '新客',
		value: 1
	}, {
		label: '常态跟进',
		value: 2
	}, {
		label: '签订意向协议',
		value: 3
	}, {
		label: '缴纳定金',
		value: 4
	}, {
		label: '签订合同',
		value: 5
	}, {
		label: '缴纳首付款',
		value: 6
	}, {
		label: '缴纳尾款',
		value: 7
	}, {
		label: '已成交',
		value: 8
	}, {
		label: '无效',
		value: 9
	}]
	const statusBarHeight = ref('')
	onReachBottom(() => {
		if (total.value > list.value.length) {
			query['page']++
			initlist()
		}
	})
	onPullDownRefresh(() => {
		console.log('下拉刷新触发');
		query['page'] = 1
		list.value = []
		initlist()
		setTimeout(() => {
			// 数据加载完成后停止刷新
			uni.stopPullDownRefresh();
			console.log('刷新完成');
		}, 1000);
	})

	function statustext(id, arr) {
		var ind = arr.findIndex(item => item.value == id)
		if (ind == -1) return
		return arr[ind]['label']
	}
	onShow(() => {
		query.page = 1
		list.value = []
		initlist()
	})

	function gopage(id, item) {
		if (item['show'] == 2) {
			uni.showToast({
				title: '您已退出合作暂不能查看',
				icon: 'none'
			})
			return
		}
		uni.navigateTo({
			url: '/sub_TouristSource/index/kehudetail?id=' + id
		})
	}
	async function initlist() {
		const res = await $api.dayrenwu(query)
		if (res.code == 1) {
			list.value.push(...res.data.list)
			total.value = res.data.count
		}
	}
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#CAEEFF'
		} else {
			back1.value = ''
		}
	})
	//时间戳13位
	function formatDate(time) { //时间戳转日期
		let date = new Date(time);
		let y = date.getFullYear();
		let MM = date.getMonth() + 1;
		MM = MM < 10 ? ('0' + MM) : MM;
		let d = date.getDate();
		d = d < 10 ? ('0' + d) : d;
		let h = date.getHours();
		h = h < 10 ? ('0' + h) : h;
		let m = date.getMinutes();
		m = m < 10 ? ('0' + m) : m;
		let s = date.getSeconds();
		s = s < 10 ? ('0' + s) : s;
		return y + '-' + MM + '-' + d + ' ' + h + ':' + m

	}
</script>

<style lang="scss">
	.msgicon {
		width: 608rpx;
		margin: 100rpx auto;
		overflow: hidden;

		.msgtext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #86909C;
			text-align: center;
			width: 100%;
			margin-top: 30rpx;
		}

		image {
			width: 608rpx;
		}
	}

	page {
		background: #F7F8FA;
	}

	.everydayrenwu {
		width: 100%;
		overflow: hidden;
		position: relative;

		.everydayrenwuback {
			width: 100%;
			height: 278rpx;
			background: linear-gradient(180deg, #53ACFF 1%, rgba(133, 204, 251, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: absolute;
			z-index: -1;
		}

		.contentList {
			width: 686rpx;
			margin: auto;
			margin-top: 32rpx;
			overflow: hidden;

			.itemboxx {
				width: 686rpx;
				background: #FFFFFF;
				overflow: hidden;
				box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.02);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-bottom: 28rpx;

				.centernr {
					width: 638rpx;
					margin: auto;

					.jjyy {
						width: 638rpx;
						height: 72rpx;
						background: #F7F8FA;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						margin-bottom: 28rpx;
						display: flex;
						align-items: center;
						font-weight: 400;
						font-size: 24rpx;
						color: #86909C;

						.lookall {
							display: flex;
							align-items: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #2AB4F5;
							margin-left: 30rpx;

							.arrowright {
								width: 28rpx;
								height: 28rpx;
							}
						}


						.waricon {
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
							margin-left: 20rpx;
						}
					}

					.bottomdt {
						width: 100%;
						display: flex;
						margin-top: 24rpx;
						border-top: 2rpx solid #F7F8FA;



						.btnss {
							width: 100%;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							height: 104rpx;

							.sucessbtn {
								width: 176rpx;
								height: 64rpx;
								background: #EEF9FF;
								border-radius: 12rpx 12rpx 12rpx 12rpx;
								text-align: center;
								line-height: 64rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #2AB4F5;
								margin-right: 24rpx;
							}

							.lvbtn {
								width: 176rpx;
								height: 64rpx;
								background: #E8FFEA;
								border-radius: 12rpx 12rpx 12rpx 12rpx;
								text-align: center;
								line-height: 64rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #00B42A;
								margin-right: 24rpx;
							}

							.tjgj {
								width: 176rpx;
								height: 64rpx;
								background: #13A2E6;
								border-radius: 12rpx 12rpx 12rpx 12rpx;
								text-align: center;
								line-height: 64rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #FFFFFF;
								display: flex;
								justify-content: center;
								align-items: center;

								.iconbtn {
									width: 28rpx;
									height: 28rpx;
									margin-right: 8rpx;
								}
							}
						}



					}

					.ll2 {
						width: 100%;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #1D2129;
						margin-top: 20rpx;
					}

					.ll1 {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 24rpx;

						.tt {
							.phoneicon {
								width: 28rpx;
								height: 28rpx;
								margin-right: 4rpx;
							}

							display: flex;
							align-items: center;
							font-family: PingFang SC,
							PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #1D2129;
						}
					}

					.ll {
						width: 100%;
						display: flex;
						align-items: center;
						margin-top: 16rpx;

						.fc {
							width: 76rpx;
							height: 40rpx;
							background: #F7F8FA;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							text-align: center;
							line-height: 40rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #4E5969;
						}

						.tt {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #1D2129;
							margin-left: 8rpx;
						}
					}
				}

				.topline {
					width: 100%;
					height: 72rpx;
					background: linear-gradient(90deg, #D8F2FF 0%, rgba(216, 242, 255, 0.06) 100%);
					overflow: hidden;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.leftbox {
						display: flex;
						align-items: center;
						margin-left: 26rpx;

						image {
							width: 31rpx;
							height: 31rpx;
						}

						.yxtext {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 30rpx;
							color: #0B5FA9;
							margin-left: 10rpx;
						}

						.reduc {
							width: 12rpx;
							height: 12rpx;
							background: #F53F3F;
							border-radius: 50%;
							margin-left: 16rpx;
						}
					}

					.rightxk {
						padding: 0 10rpx;
						height: 52rpx;
						background: #FF7D00;
						box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(255, 125, 0, 0.42);
						border-radius: 26rpx 0rpx 0rpx 26rpx;
						text-align: center;
						line-height: 52rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>